<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="dataForm"
    >
      <el-form-item>
        <el-input
          v-model="dataForm.key"
          placeholder="请输入订单号/顾客姓名/手机号码"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="value2"
          @change="dateFun"
          type="datetimerange"
          value-format="timestamp"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button @click="exportFun()" type="primary">导出</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="currentName" @tab-click="handleClick">
      <el-tab-pane label="待支付" name="1"></el-tab-pane>
      <el-tab-pane label="待发货" name="2"></el-tab-pane>
      <el-tab-pane label="待收货" name="3"></el-tab-pane>
      <el-tab-pane label="已完成" name="4"></el-tab-pane>
      <el-tab-pane label="已取消" name="8"></el-tab-pane>
    </el-tabs>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        header-align="center"
        align="center"
        label="创建时间"
      >
        <template slot-scope="scope">
          {{ getStrTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="reqsn"
        width="200"
        header-align="center"
        align="center"
        label="订单编号"
      >
      </el-table-column>
      <el-table-column
        width="200"
        prop="typeDescribe"
        header-align="center"
        align="center"
        label="会员信息"
      >
        <template slot-scope="scope">
          <div v-if="scope.row" class="info">
            <div class="img">
              <img :src="scope.row.memberInfo.avatarUrl" alt="" />
            </div>
            <div class="rightCo">
              <div class="title">
                {{ scope.row.memberInfo.nickName }}
              </div>
              <div class="phone">{{ scope.row.memberInfo.tel }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderMoney"
        header-align="center"
        align="center"
        label="订单金额"
      >
      </el-table-column>

      <el-table-column
        prop="payMoney"
        header-align="center"
        align="center"
        label="实收金额"
      >
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        header-align="center"
        align="center"
        label="订单状态"
      >
        <template slot-scope="scope">
          {{ orderStatus(scope.row.orderStatus) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="payTime"
        header-align="center"
        align="center"
        label="支付时间"
      >
        <template slot-scope="scope">
          {{ getStrTime(scope.row.payTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="payType"
        header-align="center"
        align="center"
        label="支付方式"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        header-align="center"
        align="center"
        label="收货信息"
        width="250"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.name }} {{ scope.row.tel }}</div>
          <div>
            {{ scope.row.province }} {{ scope.row.city }}
            {{ scope.row.country }}{{ scope.row.address }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.orderStatus == 1"
            type="text"
            size="small"
            @click="UpdatePrice(scope.row)"
            >改价</el-button
          >
          <el-button
            v-if="scope.row.orderStatus == 2"
            type="text"
            size="small"
            @click="toEditLogistics(scope.row)"
            >发货</el-button
          >
          <el-button
            v-if="scope.row.orderStatus == 2"
            type="text"
            size="small"
            @click="closeOrder(scope.row)"
            >关闭</el-button
          >
          <el-button
            v-if="scope.row.orderStatus == 3"
            type="text"
            size="small"
            @click="toEditLogistics(scope.row)"
            >修改物流</el-button
          >
          <el-button type="text" size="small" @click="toDetails(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
    <!-- 弹窗, 详情 -->
    <order-info v-if="infoVisible" ref="orderInfo"></order-info>
    <!-- 弹窗, 修改物流 -->
    <edit-logistics
      v-if="editVisible"
      ref="editLogistics"
      @refreshDataList="getDataList"
    ></edit-logistics>
  </div>
</template>

<script>
import AddOrUpdate from "./orderList-add-or-update";
import OrderInfo from "./orderList-info";
import editLogistics from "./order-edit-logistics";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
      dataForm: {
        key: "",
        status: null,
        positionId: null,
      },
      optionTwo: [
        {
          value: null,
          label: "全部",
        },
        {
          value: true,
          label: "启用",
        },
        {
          value: false,
          label: "禁用",
        },
      ],
      endTime: "",
      startTime: "",
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      infoVisible: false,
      editVisible: false,
      // 导航栏初始数据
      currentName: "1",
    };
  },
  components: {
    AddOrUpdate,
    OrderInfo,
    editLogistics,
  },
  activated() {
    this.getDataList();
  },
  computed: {
    orderStatus(e) {
      return (e) => {
        switch (e) {
          case 1:
            return "待支付";
          case 2:
            return "待发货";
          case 3:
            return "待收货";
          case 4:
            return "已完成";
          case 5:
            return "退款中";
          case 6:
            return "退款成功";
          case 7:
            return "退款失败";
          case 8:
            return "已取消";
        }
      };
    },
  },
  methods: {
    handleClick() {
      this.getDataList();
    },
    exportFun() {
      this.$http({
        url: this.$http.adornUrl("/admin/order/exportOrderInfo"),
        method: "post",
        // responseType: 'arraybuffer',
        data: {
          endTime: this.endTime,
          startTime: this.startTime,
          pageNum: this.pageIndex,
          pageSize: 10,
          orderStatus: Number(this.currentName),
          searchKey: this.dataForm.key,
        },
      }).then(({ data }) => {
        // console.log(data)
        if (data.code == "200") {
          // let blob = new Blob([data.data], {type:"application/force-download"}) // Blob 对象表示一个不可变、原始数据的类文件对象
          // let fileReader = new FileReader()   // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
          // fileReader.readAsDataURL(blob)
          //开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
          //  a.href =
          console.log(data);
          window.open(data.data);
          // fileReader.onload = (e) => {
          // let a = document.createElement('a')
          // a.download = `会员列表.xlsx`
          //  a.href = e.target.result
          // a.href = data.data
          // document.body.appendChild(a)
          // a.click()
          // document.body.removeChild(a)
          // }
        }
      });
    },
    dateFun(e) {
      if (e) {
        this.endTime = e[0];
        this.startTime = e[1];
      } else {
        this.endTime = "";
        this.startTime = "";
      }

      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/admin/order/pageOrderList`),
        method: "post",
        data: this.$http.adornData({
          endTime: this.endTime,
          startTime: this.startTime,
          pageNum: this.pageIndex,
          pageSize: 10,
          orderStatus: Number(this.currentName),
          searchKey: this.dataForm.key,
        }),
      }).then(({ data }) => {
        if (data && data.code === "200") {
          this.dataList = data.list;
          this.totalPage = data.total;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    UpdatePrice(item) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(item);
      });
    },
    // 打开详情弹窗
    toDetails(item) {
      this.infoVisible = true;
      this.$nextTick(() => {
        this.$refs.orderInfo.init(item);
      });
    },
    // 打开编辑物流
    toEditLogistics(item) {
      this.editVisible = true;
      this.$nextTick(() => {
        this.$refs.editLogistics.init(item);
      });
    },
    // 关闭订单
    closeOrder(item) {
      this.$confirm("订单关闭后, 支付货款将原路退回?", "关闭订单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/admin/order/closeOrder"),
            method: "put",
            data: this.$http.adornData({
              reqsn: item.reqsn,
            }),
          }).then(({ data }) => {
            if (data && data.code === "200") {
              this.$message({
                type: "success",
                message: "关闭成功!",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消关闭",
          });
        });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/course/coursetype/delete"),
          method: "post",
          data: this.$http.adornData(ids, false),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              },
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.info {
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    width: 40px;
    height: 40px;
    border: 1px solid #999;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .rightCo {
    .title {
      color: #333;
      font-size: 14px;
    }
    .phone {
      color: #333;
      font-size: 14px;
    }
  }
}
</style>